
<div class="as-teasing-banner position-relative" style="heihgt: 5.2vh">
  <div class="sticky-top as-100vh" style="width: 100%; height: 100vh">
    <div class="h-100 position-absolute w-100" style="z-index: 100;">
      <div class="container mx-auto flex-center h-100 as-teasing-text" style="transform: translateY(100%);">
        <div class="mw-text-5 text-center text-white">
          <h1 class="visually-hidden">{{ section.settings.heading }}</h1>
          <div class="mb-2 icon-logo-teasing">{% render 'icon-logo-teasing' %}</div>
          <div class="no-last-margin lead">{{ section.settings.richtext }}</div>
          <count-down class="as-countdown countdown inactive mt-4 mt-md-3 d-block" data-end-time="{{ section.settings.time }}">
            <div class="fw-bold display-4 mb-0 as-countdown-time" data-over="{{ section.settings.over_text }}">
              <span class="as-countdown-days d-inline-blocks countdown-list-width text-center">00</span>
              <span class="countdown-separator">:</span>
              <span class="as-countdown-hours d-inline-block countdown-list-width text-center">00</span>
              <span class="countdown-separator">:</span>
              <span class="as-countdown-minutes d-inline-block countdown-list-width text-center">00</span>
              <span class="countdown-separator">:</span>
              <span class="as-countdown-seconds d-inline-block countdown-list-width text-center">00</span>
            </div>
          </count-down>
          {% if section.settings.button_label != blank %}
            <div class="mt-4 mt-md-6">
              <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#teasing-notify-me">
                {{ section.settings.button_label }}
              </button>
            </div>
          {% endif %}
          {%- liquid
            assign social_media_string = 'twitter,facebook,instagram,pinterest,snapchat,youtube,vimeo,tumblr,tiktok'
            assign social_media = social_media_string | split: ','
            assign show_media = false
            for media in social_media
              assign social_link = media | append: '_link' | prepend: 'social_'
              if settings[social_link] != blank
                assign show_media = true
                break
              endif
            endfor
          -%}
          {%- if show_media -%}
            <div class="row g-2 justify-content-center mt-3 mt-md-4">
              <div class="col-auto flex-center small">
                <div class="margin-top-negative-1">{{ section.settings.follow }}</div>
              </div>
              {% for media in social_media %}
                {% assign social_link = media | append: '_link' | prepend: 'social_' %}
                {% if settings[social_link] != blank %}
                  <div class="col-auto flex-center">
                    <a {% render 'link', link: settings[social_link] %} class="link-footer {{ color_style }} text-decoration-none icon-wrap-sm"
                      href="{{ settings[social_link] }}">
                      {% render 'icon-social-media', media: media %}
                    </a>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          {%- endif show_media -%}
        </div>
      </div>
    </div>
    <div class="h-100 position-absolute ratio w-100 overflow-hidden">
      <figure class="mb-0">
        <picture>
          <source media="(max-width: 1023px)" sizes="(max-width: 1023px) 100vw, 1023px"
            srcset="{%- if section.settings.mobile_image_audience.width >= 414 -%}{{ section.settings.mobile_image_audience | image_url: width:  '414' }} 414w,{%- endif -%}
            {%- if section.settings.mobile_image_audience.width >= 600 -%}{{ section.settings.mobile_image_audience | image_url: width:  '600' }} 600w,{%- endif -%}
            {%- if section.settings.mobile_image_audience.width >= 828 -%}{{ section.settings.mobile_image_audience | image_url: width:  '828' }} 828w,{%- endif -%}
            {%- if section.settings.mobile_image_audience.width >= 1000 -%}{{ section.settings.mobile_image_audience | image_url: width:  '1000' }} 1000w,{%- endif -%}
            {%- if section.settings.mobile_image_audience.width >= 1200 -%}{{ section.settings.mobile_image_audience | image_url: width:  '1780' }} 1200w,{%- endif -%}
            {%- if section.settings.mobile_image_audience.width >= 2400 -%}{{ section.settings.mobile_image_audience | image_url: width:  '2000' }} 2400w,{%- endif -%}">
          <img
            class="h-100 object-fit-cover position-absolute w-100 as-teasing-audience"
            srcset="{%- if section.settings.desktop_image_audience.width >= 1200 -%}{{ section.settings.desktop_image_audience | image_url: width: 1200 }} 1200w,{%- endif -%}
            {%- if section.settings.desktop_image_audience.width >= 1400 -%}{{ section.settings.desktop_image_audience | image_url: width: 1400 }} 1400w,{%- endif -%}
            {%- if section.settings.desktop_image_audience.width >= 1600 -%}{{ section.settings.desktop_image_audience | image_url: width: 1600 }} 1600w,{%- endif -%}
            {%- if section.settings.desktop_image_audience.width >= 1720 -%}{{ section.settings.desktop_image_audience | image_url: width: 1720 }} 1720w,{%- endif -%}
            {%- if section.settings.desktop_image_audience.width >= 1920 -%}{{ section.settings.desktop_image_audience | image_url: width: 1920 }} 1920w,{%- endif -%}
            {%- if section.settings.desktop_image_audience.width >= 2400 -%}{{ section.settings.desktop_image_audience | image_url: width: 2400 }} 2400w,{%- endif -%}
            {%- if section.settings.desktop_image_audience.width >= 3840 -%}{{ section.settings.desktop_image_audience | image_url: width: 3840 }} 3840w,{%- endif -%}"
            src="{{ section.settings.desktop_image_audience | image_url: width: 750 }}"
            width="auto"
            height="auto"
            alt="{{ section.settings.desktop_image_audience.alt | escape }}">
        </picture>
      </figure>
    </div>
    <div class="m-auto overflow-hidden position-relative flex-center" style="height: 100vh; width: 100%;">
      <div class="as-teasing-video w-100">
        {{ section.settings.video | media_tag: image_size: "1024x", autoplay: true, loop: true, controls: false, muted: muted, preload: "none", class: "w-100 object-fit-cover h-100 d-block" }}
        <div class="as-video-mask h-100 position-absolute top-0 w-100 bg-black" style="opacity: 0"></div>
      </div>
    </div>
    <div class="h-100 position-absolute ratio w-100 overflow-hidden top-0">
      <figure class="mb-0">
        <picture>
          <source media="(max-width: 1023px)" sizes="(max-width: 1023px) 100vw, 1023px"
            srcset="{%- if section.settings.mobile_image.width >= 414 -%}{{ section.settings.mobile_image | image_url: width:  '414' }} 414w,{%- endif -%}
            {%- if section.settings.mobile_image.width >= 600 -%}{{ section.settings.mobile_image | image_url: width:  '600' }} 600w,{%- endif -%}
            {%- if section.settings.mobile_image.width >= 828 -%}{{ section.settings.mobile_image | image_url: width:  '828' }} 828w,{%- endif -%}
            {%- if section.settings.mobile_image.width >= 1000 -%}{{ section.settings.mobile_image | image_url: width:  '1000' }} 1000w,{%- endif -%}
            {%- if section.settings.mobile_image.width >= 1200 -%}{{ section.settings.mobile_image | image_url: width:  '1780' }} 1200w,{%- endif -%}
            {%- if section.settings.mobile_image.width >= 2400 -%}{{ section.settings.mobile_image | image_url: width:  '2000' }} 2400w,{%- endif -%}">
          <img
            class="h-100 object-fit-cover position-absolute w-100 as-teasing-glass"
            srcset="{%- if section.settings.desktop_image.width >= 1200 -%}{{ section.settings.desktop_image | image_url: width: 1200 }} 1200w,{%- endif -%}
            {%- if section.settings.desktop_image.width >= 1400 -%}{{ section.settings.desktop_image | image_url: width: 1400 }} 1400w,{%- endif -%}
            {%- if section.settings.desktop_image.width >= 1600 -%}{{ section.settings.desktop_image | image_url: width: 1600 }} 1600w,{%- endif -%}
            {%- if section.settings.desktop_image.width >= 1720 -%}{{ section.settings.desktop_image | image_url: width: 1720 }} 1720w,{%- endif -%}
            {%- if section.settings.desktop_image.width >= 1920 -%}{{ section.settings.desktop_image | image_url: width: 1920 }} 1920w,{%- endif -%}
            {%- if section.settings.desktop_image.width >= 2400 -%}{{ section.settings.desktop_image | image_url: width: 2400 }} 2400w,{%- endif -%}
            {%- if section.settings.desktop_image.width >= 3840 -%}{{ section.settings.desktop_image | image_url: width: 3840 }} 3840w,{%- endif -%}"
            src="{{ section.settings.desktop_image | image_url: width: 750 }}"
            width="auto"
            height="auto"
            alt="{{ section.settings.desktop_image.alt | escape }}">
        </picture>
      </figure>
    </div>

  </div>

  <aside>
    <div class="as-notify-me-modal newsletter-modal modal fade" id="teasing-notify-me"  tabindex="-1" aria-labelledby="newsletterModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0">
          <button type="button" class="p-0 as-close btn-close btn-modal-close icon-wrap-md" data-bs-dismiss="modal" aria-label="Close">
            {% render 'icon-close-circle' %}
          </button>
          <div class="modal-body p-0">
            <div class="modal-inner-content">
              <div class="newsletter-modal-wrap as-notify-me-modal-wra position-relative">
                <div class="form-wrap">
                  {%- assign forms = section.blocks | where: 'type', 'form' -%}
                  {%- if forms.size > 0 -%}
                    {%- for block in forms -%}
                      {% if block.settings.title != blank %}
                        <h2 class="h4 mb-1 text-center">{{ block.settings.title }}</h2>
                      {% endif %}
                      {% if block.settings.text != blank %}
                        <div class="mb-0 text-center gray-700 no-last-margin richtext-with-link small">{{ block.settings.text }}</div>
                      {% endif %}
                      <div class="mt-4">
                        {% assign api = settings.subscribe_api %}
                        {% form 'customer', id: 'teasing-modal-contact_form', data-action: api, data-customize: true, class: 'as-notify-me-form as-validate-form newsletter-form', novalidate: 'novalidate', autocomplete: "off" %}
                          <div class="position-relative">
                            <div class="">
                              <div class="">
                                <div class="form-pristine">
                                  <input
                                    data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
                                    data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}"
                                    type="email"
                                    {% if api != blank %} name="email" {% else %} name="contact[email]"  {% endif %}
                                    class="form-control input-pristine"
                                    value="{{ form.email }}"
                                    aria-required="true"
                                    autocorrect="off"
                                    autocapitalize="off"
                                    autocomplete="email"
                                    placeholder="{{ 'general.subscribe.placeholder' | t }}"
                                    required
                                  >
                                </div>
                              </div>
                              {% if settings.enable_gdpr_policy_checkbox %}
                                <div class="form-pristine mt-2">
                                  <div class="fs-footnote form-check input-pristine">
                                    <input
                                      data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}"
                                      class="form-check-input rounded-0" type="checkbox" name="check" id="flexCheckChecked" required>
                                    <label class="form-check-label gray-600" for="flexCheckChecked">
                                      {{ 'general.subscribe.accept_policy_html' | t }}
                                    </label>
                                  </div>
                                </div>
                              {% endif %}
                              <div class="d-grid mt-3">
                                <button type="submit" class="btn btn-primary">
                                  <span class="as-spinner visually-hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                  {{ block.settings.button_label }}
                                </button>
                              </div>
                              <div class="text-danger as-error-tips d-none mt-1">{{ 'general.subscribe.error_message' | t }}</div>
                            </div>
                          </div>
                        {% endform %}
                        <div class="as-teasing-success-tips py-6 text-center text-primary d-none">{{ 'general.subscribe.success_message' | t }}</div>
                      </div>
                    {%- endfor -%}
                  {%- endif -%}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>
<div class="position-absolute as-header-change-point"></div>

{% unless request.design_mode %}
<section class="as-page-loading page-loading flex-center" style="background: #000000;">
  <div class="text-primary">
    <svg class="loading-spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
      <circle class="loading-path" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</section>
{% endunless %}

{% schema %}
  {
    "name": "Teasing banner",
    "class": "image-with-text-overlay text-over-image",
    "tag": "section",
    "settings": [
      {
        "type": "header",
        "content": "Image"
      },
      {
        "label": "Desktop Image",
        "type": "image_picker",
        "id": "desktop_image"
      },
      {
        "label": "Mobile Image",
        "type": "image_picker",
        "id": "mobile_image"
      },
      {
        "type": "header",
        "content": "Image of audience"
      },
      {
        "label": "Desktop Image",
        "type": "image_picker",
        "id": "desktop_image_audience"
      },
      {
        "label": "Mobile Image",
        "type": "image_picker",
        "id": "mobile_image_audience"
      },
      {
        "type": "header",
        "content": "Video"
      },
      {
        "type": "video",
        "id": "video",
        "label": "A Shopify-hosted video"
      },
      {
        "type": "header",
        "content": "Text"
      },
      {
        "type": "text",
        "id": "heading",
        "default": "Rokid Max",
        "label": "Heading"
      },
      {
        "type": "richtext",
        "id": "richtext",
        "default": "<p>MAXmize Your Vision</p>",
        "label": "Description"
      },
      {
        "type": "text",
        "id": "time",
        "default": "1678349501",
        "label": "The timestamp of countdown end time, unit s"
      },
      {
        "type": "text",
        "id": "over_text",
        "default": "activity ends",
        "label": "Activity ends"
      },
      {
        "type": "header",
        "content": "Button"
      },
      {
        "type": "text",
        "id": "button_label",
        "default": "Notify me",
        "label": "Button label"
      },
      {
        "type": "text",
        "id": "follow",
        "default": "Follow us",
        "label": "Follow us"
      }
    ],
    "blocks": [
      {
        "type": "form",
        "name": "Form",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "title",
            "default": "Always Stay Updated",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Get the inside scoop, events, and more.</p>",
            "label": "Description"
          },
          {
            "type": "header",
            "content": "Button"
          },
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Notify me"
          }
        ]
      }
    ]
  }
{% endschema %}
